<template>
	<view class="container">
		<view v-if="status == 0">
			<!-- 顶部标题区域 -->
			<view class="header">
				<text class="title">用户满意度调查</text>
				<view class="user-info">
					<text class="user-id">{{memberInfo.nickname}}</text>
					<text class="publish-time"></text>
				</view>
			</view>

			<!-- 调查说明 -->
			<view class="description">
				<text>为了进一步了解您对公司产品和服务的满意情况。</text>
				<text>请将一下调查内容的真实评价，意见建议反馈给我们。以便于我们及时改进产品，为您提供更加优质可靠的产品和服务。感谢您的支持与合作。</text>
			</view>


			<!-- 调查问题列表 -->
			<view class="question-list">
				<view v-for="(question, index) in questions" :key="question.id" class="question-item">
					<view class="question-title">
						<text>{{ index + 1 }}、{{ question.title }}</text>
						<!-- <text class="question-type">{{ question.type }}</text> -->
					</view>

					<!-- 单选题选项 -->
					<view class="options" v-if="question.type === '单选题'">
						<view v-for="option in question.options" :key="option.value" class="option-item"
							@click="selectOption(question.id, option.value)">
							<view class="option-radio">
								<view class="radio-inner" :class="{ 'selected': question.selected === option.value }">
								</view>
							</view>
							<text class="option-text">{{ option.label }}</text>
						</view>
					</view>
				</view>
				<view class="yijian">意见： <textarea v-model="suggestion" placeholder="请输入您的建议" /></view>
			</view>
			<view> </view>
			<view> </view>
			<view> </view>
			<view> </view>
			<!-- 提交按钮 -->
			<view class="submit-btn-container"><button class="submit-btn" @click="submitSurvey">提交问卷</button>
			</view>
		</view>
		<view class="message" v-if="status == 1">
			<image class="img-sty"
				:src="$util.image('/upload/ico/myddc.png')">
			</image>
			<view class="">
				您已完成本次调查，谢谢配合！
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				status: 0,
				questions: [{
						id: 1,
						title: '下单界面',
						type: '单选题',
						options: [{
								label: '满意',
								value: '1'
							},
							{
								label: '一般',
								value: '2'
							},
							{
								label: '不满意',
								value: '3'
							},

						],
						selected: '1' // 默认选中满意
					},
					{
						id: 2,
						title: '送货速度',
						type: '单选题',
						options: [{
								label: '满意',
								value: '1'
							},
							{
								label: '一般',
								value: '2'
							},
							{
								label: '不满意',
								value: '3'
							},

						],
						selected: '1'
					},
					// 可以继续添加更多问题...
					{
						id: 3,
						title: '整体服务',
						type: '单选题',
						options: [{
								label: '满意',
								value: '1'
							},
							{
								label: '一般',
								value: '2'
							},
							{
								label: '不满意',
								value: '3'
							},

						],
						selected: '1'
					},
					{
						id: 4,
						title: '产品评价',
						type: '单选题',
						options: [{
								label: '满意',
								value: '1'
							},
							{
								label: '一般',
								value: '2'
							},
							{
								label: '不满意',
								value: '3'
							},
					
						],
						selected: '1'
					}
				], // 问题列表
				suggestion: '', //意见或建议
				option: null, // 服务通知窗口传参
			}
		},
		computed: {
			// 定义为计算属性
			memberInfo() {
				return this.$store.state.memberInfo
			}
		},
		onLoad(option) {
			this.option = option
			// this.option = {
			// 	member_id:28,
			// 	order_id:'111111'
			// }
		},
		onShow() {
			this.fetchIsCan()
		},
		methods: {
			//判断是否已完成该问卷
			fetchIsCan() {
				let that = this
				uni.showLoading()
				this.$api.sendRequest({
					url: '/api/address/checkSurvey',
					data: {
						order_id: this.option.order_id
					},
					success: res => {
						console.log("res",res,res.code == 1)
						
						this.status = res.code
						uni.hideLoading()
					},
				});
			},
			// 选择选项
			selectOption(questionId, optionValue) {
				this.questions = this.questions.map(question => {
					if (question.id === questionId) {
						return {
							...question,
							selected: optionValue
						}
					}
					return question
				})
			},

			// 提交问卷
			submitSurvey() {
				// 检查是否所有问题都已回答
				const unansweredQuestions = this.questions.filter(q => !q.selected)
				if (unansweredQuestions.length > 0) {
					uni.showToast({
						title: `还有${unansweredQuestions.length}个问题未回答`,
						icon: 'none',
						duration: 2000
					})
					return
				}
				const answers = {
					order_id: this.option.order_id,
					member_id: this.option.member_id,
					order_interface: this.questions[0].selected,
					delivery_speed: this.questions[1].selected,
					overall_service: this.questions[2].selected,
					use_evaluation: this.questions[3].selected,
					suggestion: this.suggestion
				}
				this.$api.sendRequest({
					url: '/api/address/addSurvey',
					data: {
						...answers
					},
					success: res => {
						if (res.code == 1) {
							this.status = 1
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000
							})
						} else  {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		margin: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header {
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 15rpx;
	}

	.user-info {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666;
	}

	.description {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.description text {
		display: block;
		font-size: 28rpx;
		line-height: 1.6;
		margin-bottom: 10rpx;
	}

	.tip {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 30rpx;
	}

	.question-list {
		margin-bottom: 60rpx;
	}

	.question-item {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.question-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		font-size: 30rpx;
	}

	.question-type {
		font-size: 24rpx;
		color: #999;
	}

	.option-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 10rpx 0;
	}

	.option-radio {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #ddd;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.radio-inner {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: transparent;
		transition: background-color 0.3s;
	}

	.radio-inner.selected {
		background-color: #007AFF;
	}

	.option-text {
		font-size: 28rpx;
	}

	.submit-btn-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #f8f8f8;
	}

	.submit-btn {
		background-color: #007AFF;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
	}

	.message {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.img-sty {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 30rpx;
		margin-top: -100rpx;
	}

	.yijian {
		background-color: #fff;
		padding: 20rpx;
	}
</style>